<template>
  <div class="views-car-add">
    <div class="dialog-action">
      <el-button size="small" type="primary" @click="saveAddEdit">保存</el-button>
      <el-button size="small"  @click="closeVisible">取消</el-button>
    </div>
    <el-form ref="form" :model="addEditForm" label-width="100px">
      <el-form-item class="input-must">

        <span slot="label">车牌号<span class="input-red-tips">*</span></span>
        <el-input v-model="addEditForm.carNo"></el-input>
      </el-form-item>
      <el-form-item label="车辆识别号">
        <el-input v-model="addEditForm.vin"></el-input>
      </el-form-item>

      <el-form-item label="自编号">
        <el-input v-model="addEditForm.innerNo"></el-input>
      </el-form-item>
      <el-form-item label="发动机号">
        <el-input v-model="addEditForm.engineNo"></el-input>
      </el-form-item>
      <el-form-item label="汽车品牌">
        <el-input v-model="addEditForm.payWay"></el-input>
      </el-form-item>
      <el-form-item label="使用性质">
        <el-select v-model="addEditForm.carCharacter" placeholder="请选择使用性质">
          <el-option
            v-for="item in carCharacterAttr"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车辆类型">
        <el-select v-model="addEditForm.carType" placeholder="请选择车辆类型">
          <el-option
            v-for="item in carTypeAttr"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="车主名称">
        <el-input v-model="addEditForm.carOwner"></el-input>
      </el-form-item>
      <el-form-item label="车主电话">
        <el-input v-model="addEditForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="所属公司">
        <el-input v-model="addEditForm.companyName"></el-input>
      </el-form-item>
      <el-form-item label="变速箱">
        <el-input v-model="addEditForm.gearbox"></el-input>
      </el-form-item>
      <el-form-item label="月均行驶里程">
        <el-input v-model="addEditForm.monthMileage"></el-input>
      </el-form-item>
      <el-form-item label="年票">
        <el-input v-model="addEditForm.yearLicence"></el-input>
      </el-form-item>
      <el-form-item label="年票到期日期">
        <el-date-picker
          v-model="addEditForm.yearLicenceValid"
          type="date"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="注册日期">
        <el-date-picker
          v-model="addEditForm.e"
          type="date"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="发证日期">
        <el-date-picker
          v-model="addEditForm.registDate"
          type="date"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="环标证到期日">
        <el-date-picker
          v-model="addEditForm.greenLicenceValid"
          type="date"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="驾驶证到期日">
        <el-date-picker
          v-model="addEditForm.driverLicenceValid"
          type="date"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="运营证到期日">
        <el-date-picker
          v-model="addEditForm.operateLicenceValid"
          type="date"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="行驶证到期日">
        <el-date-picker
          v-model="addEditForm.drivingLicenceValid"
          type="date"
          placeholder="请选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="行驶证地址">
        <el-input v-model="addEditForm.drivingLicenceAddress"></el-input>
      </el-form-item>


    </el-form>

    <el-tabs>
      <el-tab-pane label="联系人">

        <span class="action-add" @click="handleAddData('owner')">+</span>
        <el-table
          :data="carOwnerData"
          border>
          <el-table-column
            width="40" class="item-action">
            <template slot-scope="scope">

              <span class="action-delete" @click="handleDeleteData('owner',scope.$index)"></span>
            </template>
          </el-table-column>
          <el-table-column
            label="联系人"
            width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="联系电话"
            width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.phone"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="备注">
            <template slot-scope="scope">
              <el-input v-model="scope.row.note"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="年审记录">
        <span class="action-add" @click="handleAddData('owner')">+</span>
        <el-table
          :data="carOwnerData"
          border>
          <el-table-column
            width="40" class="item-action">
            <template slot-scope="scope">

              <span class="action-delete" @click="handleDeleteData('owner',scope.$index)"></span>
            </template>
          </el-table-column>
          <el-table-column
            label="年审月份"
            width="200">
            <template slot-scope="scope">
              <el-date-picker
                v-model="addEditForm.e"
                type="month"
                placeholder="请选择月份">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            label="下次年审日期"
            width="200">
            <template slot-scope="scope">
              <el-date-picker
                v-model="addEditForm.e"
                type="date"
                placeholder="请选择日期">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            label="备注">
            <template slot-scope="scope">
              <el-input v-model="scope.row.note"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="保养记录">
        <span class="action-add" @click="handleAddData('owner')">+</span>
        <el-table
          :data="carOwnerData"
          border>
          <el-table-column
            width="40" class="item-action">
            <template slot-scope="scope">

              <span class="action-delete" @click="handleDeleteData('owner',scope.$index)"></span>
            </template>
          </el-table-column>
          <el-table-column
            label="保养里程"
            width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="下次保养日期"
            width="200">
            <template slot-scope="scope">
              <el-date-picker
                v-model="addEditForm.e"
                type="date"
                placeholder="请选择日期">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            label="备注">
            <template slot-scope="scope">
              <el-input v-model="scope.row.note"></el-input>
            </template>
          </el-table-column>
        </el-table></el-tab-pane>
      <el-tab-pane label="保险记录">

        <span class="action-add" @click="handleAddData('owner')">+</span>
        <el-table
          :data="carOwnerData"
          border>
          <el-table-column
            width="40" class="item-action">
            <template slot-scope="scope">

              <span class="action-delete" @click="handleDeleteData('owner',scope.$index)"></span>
            </template>
          </el-table-column>
          <el-table-column
            label="保险公司"
            width="200">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="保险日期"
            width="200">
            <template slot-scope="scope">
              <el-date-picker
                v-model="addEditForm.e"
                type="date"
                placeholder="请选择日期">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            label="备注">
            <template slot-scope="scope">
              <el-input v-model="scope.row.note"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>

  import {getCarTypeList,saveVehicle} from '@/api/company'

  import { MessageBox, Message } from 'element-ui'
  export default{
    data(){
      return{
        addEditForm:{
          carNo:'',
          //联系人
//          carOwnerData:[
//            {
//              name:'庄港发',
//              phone:'1379889552',
//              note:''
//            }],
//            //保养记录
//            carbaoData:[
//              {
//                date:'2019-10-10',
//                end:'2020-10-10',
//                note:''
//              },
//              {
//                date:'2019-10-10',
//                end:'2020-10-10',
//                note:''
//              },
//          ],
        },
        carCharacterAttr:[
          {
            label:'营运',
            value:'0',
          },{
            label:'非营运',
            value:'1',
          }
        ],
        carOwnerData:[
          {
            name:'庄港发',
            phone:'1379889552',
            note:''
          }],
        carTypeAttr:[],
      }
    },
    created(){

      this.carTypeAttr=[];
      getCarTypeList({page:1,rows:100}).then((res)=>{
        res.rows.forEach((item)=>{
          console.log(item,555)
          const itemType={
            value:item.carTypeId,
            label:item.name
          }
          this.carTypeAttr.push(itemType)
        })
      })
    },
    methods: {
      saveAddEdit(){

        if(this.addEditForm.carNo==''){
          Message({
            message: '请输入车牌号',
            type: 'error',
            duration: 1* 800
          })
          return false;
        }
//        const loading = this.$loading({
//          lock: true,
//          text: '数据提交中',
//          spinner: 'el-icon-loading',
//        });

        console.log(this.addEditForm,11111)
        saveVehicle(this.addEditForm).then((res)=>{

          console.log(res,332211)
        })
//        setTimeout(() => {
//          loading.close();
//        this.$emit('closeVisible')
//      }, 2000);
      },
      closeVisible(){
        this.$emit('closeVisible')
      },
      handleAddData(type){
        if(type=='owner'){

          const item={
            name:'',
            phone:'',
            note:''
          }
          this.carOwnerData.unshift(item)
        }
      },
      handleDeleteData(type,index){
        if(type=='owner'){
          this.carOwnerData.splice(index,1)
        }
      }
    }
  }
</script>
<style>
.views-car-add .el-form-item{
  display: inline-block;
  vertical-align: top;
  margin-right: 12px;
  margin-bottom: 18px;
}
.views-car-add  .el-form-item__label{
  text-align: left;
}
.views-car-add  .el-input__inner{
  height: 36px;
}
.views-car-add  .dialog-action{
  margin:0 0 16px;
  padding: 0 6px 16px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.05);
  }
.views-car-add .el-tabs{
  box-shadow: none;
  margin:6px 0 0;
}
.views-car-add .el-tabs__content{
  position: relative;
}
.views-car-add .el-tabs .el-form-item{
  display: block;
}
.views-car-add .el-tabs  .el-input__inner{
  width: 190px;
}
.views-car-add .el-tabs .el-table td{
  padding: 0;
}.views-car-add .el-tabs th{
  background: #f8f8f8;
   padding:8px 15px;
 }
.views-car-add .el-tabs .cell{
    padding: 0;
  }
.views-car-add .el-tabs td:first-child .cell{
  padding: 0;
}
.views-car-add .el-tabs .el-input__inner{
  border: none;
  height: 40px;
  width: 100%;
}
.views-car-add .action-delete{
    background: #fff;
    display: block;
    position: relative;
    z-index: 9;
    width:21px;
    height:21px;
    margin:auto;
    border-radius: 50%;
    cursor: pointer;
    line-height: 11px;
    text-align: center;
    border: 1px solid #F56C6C;
  }
.views-car-add .action-delete:after{
    content: '';
    background: #F56C6C;
    display: inline-block;
    width: 10px;
    height:1px;
    margin:auto;
  }
.views-car-add .action-add{
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    background: #fff;
    display: block;
    width:22px;
    height:22px;
    margin:auto;
    border-radius: 50%;
    cursor: pointer;
    line-height: 20px;
    text-align: center;
    font-size: 18px;
    color: #409EFF;
    border: 1px solid #409EFF;
  }

.views-car-add .el-table__fixed-right::before, .views-car-add .el-table__fixed::before{
  width: 0;
}

.views-car-add .el-input--suffix .el-input__inner{
  padding-right: 0 !important;
}
.views-car-add .el-date-editor.el-input, .views-car-add .el-date-editor.el-input__inner{
  width: auto;
}
.views-car-add .el-select .el-input--suffix .el-input__inner{
  padding-right: 15px!important;
  }

.views-car-add .el-tabs .el-input--suffix .el-input__inner{
  padding-right: 30px !important;
}
.views-car-add .input-must .el-input__inner{
  border: 1px solid #F56C6C;
  background: #fff3f3;
  }
  .input-red-tips{
    padding-left: 3px;
    color:#F56C6C ;
    font-size: 16px;
  }
</style>
